export class Element {
  constructor(type, props, children) {
    this.type = type;
    this.props = props;
    this.children = children;
  }
}

/**
 * 创建元素
 * @param type 标签的类型
 * @param props 标签的属性,比如class,id等
 * @param children Array 孩子节点
 * @returns {Element}
 */
export  function createElement(type, props, children) {
  return new Element(type, props, children);
}

/**
 * 递归渲染,将虚拟树的结构,渲染为真实树
 * @param eleObj
 * @returns {any}
 */
export function render (eleObj) {
  let el = document.createElement(eleObj.type);
  for (let key in eleObj.props){
    //设置属性的方法
    //第一次渲染,属性改变也要重新设置
    setAttribute(el,key,eleObj.props[key]);
  }
  eleObj.children.forEach(child=>{
    child = (child instanceof Element)?render(child):document.createTextNode(child);
    el.appendChild(child);
  });
  return el;
}

/**
 * 针对标签属性的添加
 * @param node
 * @param key
 * @param value
 */
export function setAttribute (node,key,value) {
  switch (key) {
    case 'value':
      if(node.targetNamespace.toUpperCase() === 'INPUT'||
        node.targetNamespace.toUpperCase() === 'TEXTAREA')
        node.value = value;
      else
        node.setAttribute(key,value);
      break;
    case 'style':
      node.style.cssText = value;
      break;
    default:
      //设置普通属性
      node.setAttribute(key,value);
      break;
  }
}

export function renderDOM(el,target){
  target.appendChild(el);
}